<template>
  <div class="i-table">
    <el-table
      :data="dList"
      v-loading="loading"
      @row-dblclick="playOne"
      @row-click="selectRow"
      @cell-mouse-enter="selectRow"
      @cell-mouse-leave="releaseRow"
      style="width:100%;color:#000">
      <el-table-column type="index" label="序号" width="50">
        <template slot-scope="scope">
          <span :class="scope.row.icon || getMenu.fileid == scope.row.fileid ? 'scolor': 'bcolor'">
            {{ (page.pageNum - 1) * page.limit + scope.$index + 1}}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="歌曲" width="400">
        <template slot-scope="scope">
          <span :class="scope.row.icon || getMenu.fileid == scope.row.fileid ? 'scolor': 'bcolor'">
            {{ scope.row.name}}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="artist" label="歌手" width="300">
        <template slot-scope="scope">
          <span :class="scope.row.icon || getMenu.fileid == scope.row.fileid ? 'scolor': 'ncolor'" style="font-size:13px">
            {{ scope.row.artist}}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="album" label="专辑" width="350">
        <template slot-scope="scope">
          <span :class="scope.row.icon || getMenu.fileid == scope.row.fileid ? 'scolor': 'ncolor'" style="font-size:13px">
            {{ scope.row.album}}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="timelength" label="时长" align="center">
        <template slot-scope="scope">
          <item-ctrl 
            v-if="scope.row.icon || getMenu.fileid == scope.row.fileid" 
            class="scolor" 
            :item=scope.row />
          <span v-else style="">{{ scope.row.timelength / 1000 | stringTime }}</span>
        </template>
      </el-table-column>
    </el-table>    
    <menu-list v-if="getMenuStat"/>
    <div v-if = "this.$route.name == 'itemhot'" style="margin:20px auto;width:100%">
      <el-pagination 
        layout="prev, next"
        @current-change="getTopList"
        :current-page.sync="page.pageNum"
        :page-size="page.limit"
        >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { addAnimation } from '@/api/tool'
import { playItem, addItem } from '@/api/event'
import { error } from '@/utils/toast'
import { parseTime } from '@/utils/time'
import { mapGetters, mapMutations } from 'vuex'
import { stringTime } from '@/utils/util'
import ItemCtrl from '@/components/ItemCtrl'
import MenuList from '@/components/Menulist' // 导出按钮组件
import { getUserGatherService, getUserCollectService } from '@/api/login'
import { getItemsService, getSearchService, getTopListService } from '@/api/music'
export default {
  name: "gathers",
  components: {
    ItemCtrl,
    MenuList,
  },  
  data() {
    return {
      loading:false,
      text:'',
      platform:'',
      dList:[],
      coll:new Map(),
      page: {
        pageCount: 0,
        limit:20,
        pageNum:1,
      },
    };
  },
  props:{
    etype:{
      type:String,
      default:'',
    }
  },
  filters:{
    parseTime,
    stringTime,
  },
  computed:{
    ...mapGetters(['getMenu', 'getMenuStat', 'isGuest']),
  },
  async created() {
    await this.getCollect()
    this.getData()

    // switch (this.$route.name) {
    // case "itemhot":
    //   this.etype = "9"
    //   break;
    // default:
    //   break;
    // }
  },
  methods: {
    playOne(item, column, e) {
      e.stopPropagation()

      addAnimation(this, e, () => {
        playItem(this, item)
      })
    },
    playAllItems(e) {   // 被其他模块调用
      if (this.animation) return

      this.animation = true
      this.dList.forEach((item, idx) => {
        setTimeout(() => {
          if (idx == 0) {
            addAnimation(this, e, () => {
              playItem(this, item)
            })
          } else {
            addAnimation(this, e, () => {
              addItem(this, item)
            })
          }
        }, 50 * (idx + 1))
      })

      setTimeout(() => {
        this.animation = false
      }, 500) 
    },
    searchData(text, platform) {
      this.text = text
      this.platform = platform
      this.page.pageNum = 1
      this.page.pageCount = 0
      this.dList = []
      this.getSearch()
    },
    async getSearch() {
      if (this.text == "") return
      this.loading = true
      const resp = await getSearchService({
        name: this.text, 
        platform: this.platform,
        // page: this.page.pageNum - 1, 
        // limit: this.page.limit,
        // count: this.page.pageCount,
      })
      this.loading = false

      if (!resp || 0 !== resp.result) {
        error(resp.message)
        return
      }

      this.dList = this.exData(resp.data.records)
      this.page.pageCount = resp.data.count
    },
    exData(data) {
      if (data.length == 0) return

      return data.map(item => {
        item.collect = this.coll.get(item.fileid)
        if (typeof(item.collect) == "undefined") {
          item.collect = false
        }

        item.gid = +this.$route.query.gid || 0
        item.icon = false

        return {
          ...item
        }
      })
    },
    selectRow(row, column) {
      this.dList.forEach(item => {
        if (item.fileid == row.fileid) {
          item.icon = true
        } else {
          item.icon = false
        }
      })
    },
    releaseRow() {
      this.dList.forEach(item => {
        item.icon = false
      })
    },
    async getData() {
      if (this.$route.path == "/search") {
        return
      }

      let resp = null
      switch (this.etype) {
      case '1':
        resp = await getUserGatherService({type: "fileids"})
        break;
      case '2':
        resp = await getUserGatherService({type: "nearest"})
        break;
      case '3':
        resp = await getUserGatherService({type: "upload"})
        break;
      case '9':
        this.getTopList()
        return 
      default:
        if (this.$route.name == "itemhot") {
          this.getTopList()
          return
        } else {
          resp = await getItemsService({gid:this.$route.query.gid})
        }
        break;
      }

      if (!resp || 0 !== resp.result) {
        error(resp.message)
        return
      }

      this.dList = this.exData(resp.data || [])
    },
    async getTopList() {
      const o = {
        page: this.page.pageNum - 1, 
        limit: this.page.limit
      }

      const resp = await getTopListService(o)
      if (!resp || 0 !== resp.result) {
        error(resp.message)
        return
      }

      this.dList = this.exData(resp.data || [])
    },
    async getCollect() {
      if (this.isGuest) {  // 非登录状态
        return
      }

      if (this.$route.path == "/search") {
        return
      }

      // console.log("----", this.$route.path)
      // if (typeof(this.$route.query.gid) == "undefined") { // 非专辑
      //   return
      // }

      const resp = await getUserCollectService({ctype:'F'})
      if (!resp || 0 !== resp.result) {
        error(resp.message)
        return
      }

      resp.data.forEach(item => {
        this.coll.set(item.fileid, true)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .i-table {
    width:100%;
    height: 100%;
    // margin-bottom:40px;
    // display:inline-block;
  }

  .bcolor {
    color:#000000;  
  }

  .ncolor {
    color:#9b9393;
  }
  .scolor {
    color:#409EFF; 
  }

</style>